<!DOCTYPE html>
<html lang="zh-CNs">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学海书舫图书馆</title>
    <link rel="Shortcut Icon" href="./favicon.ico">
    <link rel="stylesheet" href="./element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="./css/registered.css">
    <script src="./js/Vue.js"></script>
    <script src="./element-ui/lib/index.js"></script>
    <script src="./js/axios-0.18.0.js"></script>
</head>

<body>
    <div id="registered" class="container">
        <div class="login-wrapper">
            <div class="header">读者注册</div>
            <div id="error"></div>
            <el-button circle style="position: absolute;top: 3%; left: 3%;"><el-link icon="el-icon-arrow-left" :underline="false" href="./readerLogin.html"></el-link></el-button>
            <el-form ref="registeredForm" :model="readerForm" :rules="rules" class="form-wrapper">
                <el-form-item prop="readerEmail">
                    <el-input v-model="readerForm.readerEmail" placeholder="邮箱"></el-input>
                </el-form-item>
                <el-form-item prop="readerPhone">
                    <el-input v-model="readerForm.readerPhone" placeholder="电话"></el-input>
                </el-form-item>
                <el-form-item prop="readerSex">
                    <el-select v-model="readerForm.readerSex" placeholder="请选择性别" style="width: 100%">
                        <el-option label="男" value="男"></el-option>
                        <el-option label="女" value="女"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="readerName">
                    <el-input v-model="readerForm.readerName" placeholder="用户名"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input v-model="password" placeholder="密码" show-password></el-input>
                </el-form-item>
                <el-form-item prop="readerPassword">
                    <el-input v-model="readerForm.readerPassword" placeholder="确认密码" show-password></el-input>
                </el-form-item>
                <el-form-item prop="readerCode">
                    <el-row>
                        <el-col :span="12">
                            <el-input v-model="captcha" placeholder="验证码"></el-input>
                        </el-col>
                        <el-col :span="10">
                            <el-button type="btn" style="width: 170px; height: 40px; margin-left: 10px"
                                @click="getMailCode" :disabled="isDisable"><span
                                    id="mailCode">获取邮箱验证码</span></el-button>
                        </el-col>
                    </el-row>
                </el-form-item>
                <el-button type="btn" @click="registered">注册</el-button>
            </el-form>
        </div>
    </div>

    <script>
        new Vue({
            el: '#registered',
            methods: {
                getMailCode() {
                    axios.post("http://localhost:9090/BookManage/registered/getMailCode", this.readerForm)
                    let intervalFunc = setInterval(() => {
                        this.isDisable = true;
                        document.getElementById('mailCode').innerText = '请在' + this.value + '秒后重试'
                        if (this.value <= 0) {
                            this.isDisable = false;
                            this.value = 59;
                            document.getElementById('mailCode').innerText = '再次获取'
                            clearInterval(intervalFunc);
                        }
                        this.value--;
                    }, 1000)
                },
                registered() {
                    this.$refs['registeredForm'].validate((valid) => {
                        if (valid) {
                            axios.post("http://localhost:9090/BookManage/registered/registeredReader", {
                                reader: this.readerForm,
                                captcha: this.captcha
                            }).then(resp => {
                                if (resp.data === 'none') {
                                    document.getElementById("error").innerText = '验证码错误';
                                    this.captcha = "";
                                    this.password = "";
                                    this.readerForm = { readerName: "", readerSex: "", readerPhone: "", readerPassword: "", readerArrears: 0.00, readerState: 1, readerEmail: "" };
                                    this.isDisable = false;
                                    this.value = 59;
                                } else if (resp.data === 'email') {
                                    document.getElementById("error").innerText = '该邮箱已有账号';
                                    this.captcha = "";
                                    this.password = "";
                                    this.readerForm = { readerName: "", readerSex: "", readerPhone: "", readerPassword: "", readerArrears: 0.00, readerState: 1, readerEmail: "" };
                                    this.isDisable = false;
                                    this.value = 59;
                                } else {
                                    setInterval(() => {
                                        document.getElementById("error").innerText = '注册成功：' + this.time + '秒后跳转登录';
                                        if (this.time <= 0) {
                                            clearInterval(this.timer);
                                            this.time = 3
                                            location.replace("http://localhost:9090/BookManage/readerLogin.html")
                                        }
                                        this.time--;
                                    }, 1000)
                                }
                            })
                        }
                    });
                },

            },
            data() {
                const settingPassword = (rule, value, callback) => {
                    if (this.password === '') {
                        callback(new Error('请输入密码'));
                    } else {
                        if (this.readerForm.readerPassword !== '') {
                            this.$refs.registeredForm.validateField('readerPassword');
                        }
                        callback();
                    }
                };
                const comparePassword = (rule, value, callback) => {
                    if (value === '') {
                        callback(new Error('请再次输入密码'));
                    } else if (value !== this.password) {
                        callback(new Error('两次输入密码不一致!'));
                    } else {
                        callback();
                    }
                };
                const checkPhone = (rule, value, callback) => {
                    if (value === '') {
                        callback(new Error('请输入电话'));
                    } else {
                        if (!(/^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(19[0-9]{1}))+\d{8})$/.test(value))) {
                            callback(new Error('请输入正确的电话'));
                        }
                        callback();
                    }
                };
                const checkCode = (rule, value, callback) => {
                    if (this.captcha === '') {
                        callback(new Error('请输入验证码'))
                    } else {
                        callback();
                    }
                }
                return {
                    time: 3,
                    value: 59,
                    rules: {
                        readerEmail: [
                            { required: true, message: '请输入邮箱地址', trigger: ['blur', 'change'] },
                            { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
                        ],
                        password: [
                            { validator: settingPassword, trigger: ['blur', 'change'] }
                        ],
                        readerPassword: [
                            { validator: comparePassword, trigger: ['blur', 'change'] }
                        ],
                        readerPhone: [
                            { validator: checkPhone, trigger: ['blur', 'change'] }
                        ],
                        readerCode: [
                            { validator: checkCode, trigger: ['blur', 'change'] },
                        ]
                    },
                    captcha: "",
                    password: "",
                    readerForm: {
                        readerName: "",
                        readerSex: "",
                        readerPhone: "",
                        readerPassword: "",
                        readerArrears: 0.00,
                        readerState: 1,
                        readerEmail: ""
                    },
                    isDisable: false
                }
            }
        })
    </script>
</body>

</html>